<template>
  <card-layout title="开采范围变化" class="mining-range" bg="2">
    <template #extra>
      <el-button type="primary" size="small" @click="$emit('closeRange',3)"><el-icon><SwitchButton /></el-icon>&nbsp; 关闭</el-button>
    </template>

    <div class="content-container">
      <!-- 图表区域 -->
      <div class="charts-container">
        <div class="chart-title">开采范围变化趋势图</div>
        <div class="chart-box">
          <div ref="trendChartRef" class="chart"></div>
        </div>
      </div>
      
      <!-- 数据区域 -->
      <div class="data-container">
        <div class="data-header">
          <div class="title">开采范围数据</div>
          <el-button type="primary" size="small" @click="handleRefresh">
            <el-icon><Refresh /></el-icon> 一键清除
          </el-button>
        </div>
        
        <!-- 表格区域 -->
        <div class="table-container">
          <el-table :data="tableData" :header-cell-style="headerCellStyle" style="width: 100%" border>
            <el-table-column prop="dataName" label="数据名称" width="150" align="center"></el-table-column>
            <el-table-column prop="date" label="日期" width="100" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
              <template #default="{row}">
                <div class="operation-btns">
                  <el-button 
                    type="primary" 
                    size="small" 
                    circle
                  >
                    <el-icon><Search /></el-icon>
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          
          <!-- 分页 -->
          <div class="pagination">
            <el-pagination
              background
              layout="pager"
              :total="4"
              :current-page="currentPage"
              @current-change="handlePageChange"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </card-layout>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Search, Refresh } from '@element-plus/icons-vue';
import useChart from '@/hooks/useCharts';
import CardLayout from '@/layouts/CardLayout.vue';

// 图表引用
const trendChartRef = ref(null);
const { chartInstance: trendChart } = useChart(trendChartRef);

// 分页相关
const currentPage = ref(1);
const handlePageChange = (page) => {
  currentPage.value = page;
  // 加载对应页的数据
};

// 表格样式
const headerCellStyle = {
  background: 'rgba(13, 36, 33, 0.6)',
  color: '#fff',
  fontWeight: 'bold',
};

// 模拟数据
const tableData = ref([
  { id: 1, dataName: '25年1月开采范围', date: '2025-1-1', status: 'deleted' },
  { id: 2, dataName: '25年2月开采范围', date: '2025-2-1', status: '' },
  { id: 3, dataName: '25年3月开采范围', date: '2025-3-1', status: '' },
  { id: 4, dataName: '25年4月开采范围', date: '2025-4-1', status: '' },
]);

// 处理删除
const handleDelete = (row) => {
  row.status = 'deleted';
  updateChart();
};

// 处理添加
const handleAdd = (row) => {
  row.status = 'added';
  updateChart();
};

// 刷新数据
const handleRefresh = () => {
  tableData.value.forEach(item => {
    item.status = '';
  });
  updateChart();
};

// 更新图表
const updateChart = () => {
  if (!trendChart.value) return;
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['2020', '2021', '2022', '2023', '2024'],
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisLabel: {
        color: '#fff'
      }
    },
    yAxis: {
      type: 'value',
      name: '',
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisLabel: {
        color: '#fff'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      }
    },
    series: [
      {
        name: '开采范围',
        type: 'line',
        data: [150, 100, 200, 170, 100],
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: '#f8b551'
        },
        lineStyle: {
          width: 3,
          color: '#f8b551'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(248, 181, 81, 0.6)'
              },
              {
                offset: 1,
                color: 'rgba(248, 181, 81, 0)'
              }
            ]
          }
        },
        markPoint: {
          data: [
            { type: 'max', name: '最大值' },
            { type: 'min', name: '最小值' }
          ]
        }
      }
    ]
  };
  
  trendChart.value.setOption(option);
};

onMounted(() => {
  updateChart();
});
</script>

<style lang="scss" scoped>
.mining-range {
  width: 100%;
  height: 100%;
  .content-container {
    // padding: 5px;
    // height: calc(100% - 44px);
    // display: flex;
    // flex-direction: column;
    // gap: 10px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
    height: calc(100% - 44px);
    overflow: hidden;
    .charts-container {
      height: 40%;
      margin-top: 10px;
      .chart-title {
        font-size: 16px;
        color: #fff;
        margin-bottom: 10px;
        text-align: center;
      }
      
      .chart-box {
        height: calc(100% - 30px);
        
        .chart {
          width: 100%;
          height: 100%;
        }
      }
    }
    
    .data-container {
      height: 60%;
      background: rgba(13, 36, 33, 0.3);
      border-radius: 4px;
      padding: 5px;
      
      .data-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        margin-left: 5px;
        margin-right: 5px;
        .title {
          font-size: 16px;
          color: #fff;
          font-weight: bold;
        }
      }
      
      .table-container {
        height: calc(100% - 40px);
        :deep(.el-table) {
          background-color: transparent;
          color: #fff;
          
          .el-table__row {
            background-color: rgba(13, 36, 33, 0.4);
            
            &:hover > td {
              background-color: rgba(13, 36, 33, 0.6) !important;
            }
          }
          
          .el-table__row:nth-child(2n) {
            background-color: rgba(13, 36, 33, 0.2);
          }
          
          td, th {
            border-color: rgba(255, 255, 255, 0.1);
          }
        }
        
        .operation-btns {
          display: flex;
          gap: 5px;
          justify-content: center;
        }
        
        .pagination {
          margin-top: 15px;
          display: flex;
          justify-content: center;
        }
      }
    }
  }
  
  .more-div {
    cursor: pointer;
    margin-right: 15px;
    color: #fff;
    
    &:hover {
      color: #f8b551;
    }
  }
}
</style>